<template>
  <view>
    <my-message-top :text="'风格选择'"></my-message-top>
    
    <view class="style-box">
      <image :src="pic" mode=""></image>
      <text class="style-t1">请选择您想要的风格</text>
      <view class="style-choice">
        <view class="style-choice-box" v-for="(item,i) in styleList" :key="i" @click="getStyle(item), this.style = i">
          <text class="style-t2">{{ item }}</text>
        </view>
      </view>
      
      <view class="style-btn" @click="toChange()">
        <text class="style-t3">开始生成</text>
      </view>
    </view>
    
  </view>
</template>

<script>
  import {startChange} from '../../api/cat-camera.js'
  export default {
    data() {
      return {
        pic: '',
        styleList: ['复古漫画','3D童话','二次元','小清新','未来科技','国画古风','将军百战','炫彩卡通','清雅国风','喜迎新年'],
        style: 0
      };
    },
    onLoad(option){
      console.log(option.pic);
      this.pic = option.pic
      console.log(this.pic);
    },
    methods:{
      async toChange(){
        const {data:data} = await startChange(this.pic,this.style)
        console.log(this.style);
        console.log(data.data);
        uni.navigateTo({
          url: '/subpkg/style-choice2/style-choice2?task_id=' + data.data
        })
      },
      getStyle(item){
        uni.$showMsg('已选择'+ item)
      }
    }
  }
</script>

<style lang="scss">
.style-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 35rpx 28rpx;
  image{
    width: 580rpx;
    height: 442rpx;
    margin-bottom: 45rpx;
  }
  .style-t1{
    font-size: 15px;
    font-weight: bold;
    color: #868686;
    margin-left: -385rpx;
    margin-bottom: 25rpx;
  }
  .style-choice{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: space-between;
    
    .style-choice-box{
      width: 164rpx;
      height: 76rpx;
      background-color: #FFF4CE;
      border-radius: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 25rpx;
      .style-t2{
        font-size: 15px;
        font-weight: bold;
        color: #868686;
      }
    }
  }
  .style-btn{
    background-image: url('~@/static/cat-camera/rectangle57.png');
    background-repeat: no-repeat;
    width: 342rpx;
    height: 122rpx;
    margin-top: 100rpx;
    text-align: center;
    .style-t3{
      line-height: 122rpx;
      font-size: 18px;
      font-weight: bold;
      color: #666666;
    }
  }
}

</style>
